<template>
  <div class="all">
<!--    <el-button type="primary" @click="handleAdd()" style="float: right">添加</el-button>-->
    <el-table :data="tableData" >
      <el-table-column prop="id" label="ID" width="180"></el-table-column>

      <el-table-column prop="problem" label="问题">
      </el-table-column>

      <!--      <el-table-column label="问题图片">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-image-->
      <!--            v-if="scope.row.questionUrlList.length>0"-->
      <!--            style="width: 100px; height: 100px"-->
      <!--            :src="scope.row.questionUrlList[0]"-->
      <!--            :preview-src-list="scope.row.questionUrlList">-->
      <!--          </el-image>-->
      <!--          <span v-else></span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column prop="answer" label="回答"></el-table-column>

      <!--      <el-table-column label="问题图片">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-image-->
      <!--            v-if="scope.row.answerUrlList.length>0"-->
      <!--            style="width: 100px; height: 100px"-->
      <!--            :src="scope.row.answerUrlList[0]"-->
      <!--            :preview-src-list="scope.row.answerUrlList">-->
      <!--          </el-image>-->
      <!--          <span v-else></span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->


      <el-table-column label="操作" width="180">
        <template slot-scope="scope">

          <el-button type="primary" @click="handleEdit(scope.row.productid,scope.row.id)">修改</el-button>

        </template>

      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <!--    <el-dialog title="请输入类别名称" :visible.sync="dialogVisible">-->
    <!--      <el-form ref="form" :model="form" label-width="120px">-->
    <!--        <el-form-item label="类别名称">-->
    <!--          <el-input v-model="form.name" placeholder="请输入类别名称"></el-input>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="类别">-->
    <!--          <el-select v-model="form.typeid" placeholder="请选择">-->
    <!--            <el-option-->
    <!--              v-for="item in typeList"-->
    <!--              :key="item.id"-->
    <!--              :label="item.name"-->
    <!--              :value="item.id">-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="上传文件">-->
    <!--          <el-upload-->
    <!--            class="upload-demo"-->
    <!--            ref="upload"-->
    <!--            action="https://jsonplaceholder.typicode.com/posts/"-->
    <!--            :on-preview="handlePreview"-->
    <!--            :on-remove="handleRemove"-->
    <!--            :on-change="handleChange"-->
    <!--            :file-list="fileList"-->
    <!--            :auto-upload="false">-->
    <!--            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
    <!--            &lt;!&ndash;            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>&ndash;&gt;-->
    <!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
    <!--          </el-upload>-->
    <!--        </el-form-item>-->

    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="submitForm('form')">确 定</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
import myaxios from "../config/myaxios";

export default {
  name: "QuestionPage",
  data() {
    return {
      tableData: [
        // {
        //   id: 1,
        //   name: '柜子'
        // }
      ],
      typeList: [],
      dialogVisible: false,
      form: {
        name: '',
        typeid: null,
        fileList: []
      },
      currentPage: 1,
      pageSize: 5,
      total: 0,
      problem: "", // 商品民称
      productid: 0, // 种类id
      fileList: []
    }
  },
  mounted() {
    this.productid = this.$route.params.id
    console.log(this.productid)
    // this.getTypeall()
    // if (this.productid)
    this.getall()
  },
  methods: {

    //
    getall() {
      let urlSearchParams = new URLSearchParams();
      urlSearchParams.append("current", this.currentPage)
      urlSearchParams.append("pageSize", this.pageSize)
      if (this.productid != "" && this.productid != undefined && this.productid != 0) {
        urlSearchParams.append("productid", this.productid)
      }

      if (this.problem != null && this.problem != "") {
        urlSearchParams.append("problem", this.problem)
      }


      myaxios.get('question', {
        params: urlSearchParams
      })
        .then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }

        })
        .catch(error => {
          console.log(error);
          this.$message.error("系统繁忙，请重试")
        });
    },

    handleEdit(productid,row) {

      this.$router.push("/questionupdate/" + productid + "/" + row)

      // 在这里添加你的修改逻辑
    },
    handleDelete(id) {

      console.log(id);
      this.$alert('是否删除', '删除', {
        confirmButtonText: '确定',
        callback: action => {
          let urlSearchParams = new URLSearchParams();
          urlSearchParams.append("id", id)
          myaxios.delete("question", {
            params: urlSearchParams
          }).then(res => {
            // console.log(res)
            if (res.data.code === 0) {
              this.$message.success("删除成功")
              this.getall()
            } else {
              this.$message.error(res.data.message)
            }

          })
            .catch(error => {
              console.log(error);
              this.$message.error("系统繁忙，请重试")
            });
        }
      });


      // 在这里添加你的删除逻辑
    },
    handleAdd() {
      this.$router.push("/questionupdate/" + this.productid)
    },
    submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      let formData = new FormData;
      formData.append("name", this.form.name)
      for (var i = 0; i < this.form.fileList.length; i++) {
        formData.append("products", this.form.fileList[i])
      }

      formData.append("typeid", this.form.typeid)
      myaxios.post('product', formData)
        .then(response => {
          console.log(response);
          if (response.data.code === 0) {
            this.$message.success("添加成功")
            this.getall()
          } else {
            this.$message.error(response.data.message)
          }
          this.dialogVisible = false;
          this.form.name = null
        })
        .catch(error => {
          console.log(error);
        });
    },
    // });

    handleCurrentChange(val) {
      this.currentPage = val;
      this.getall()
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getall()
    },
    // submitUpload() {
    //   this.$refs.upload.submit();
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange(file, fileList) {
      console.log(file.raw)
      this.form.fileList.push(file.raw)
      console.log(this.form.fileList)
    },
    goto(id) {
      this.$router.push("/question/" + id)
    }
  }
}
</script>

<style scoped>

</style>
